<template>
	<view>
		<view class="u-page">
			<view class="search">
				<div class="search_input">
					<u-search
						action-text="查询"
						@custom="search"
						placeholder="请输入快递单号"
						bg-color="#fff"
						border-color="#EDEDED"
						shape="square"
						v-model="params.param"
					></u-search>
				</div>
				<u-icon @click="scanCode" class="search_scan" name="scan" size="45"></u-icon>
			</view>
			<scroll-view
				class="list"
				scroll-y="true"
				refresher-enabled="true"
				:refresher-triggered="triggered"
				@refresherrefresh="refresherrefresh"
				:refresher-threshold="100"
				@refresherrestore="onRestore"
				@scrolltolower="scrolltolower"
			>
				<expressItem v-for="item in datalist" :key="item.id" :content="item"  />
				<u-loadmore v-if="dataOver" status="nomore" :load-text="loadText" icon-type="flower" padding-top="40" padding-bottom="40" bg-color="#f8f8f8" />
			</scroll-view>
		
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" active-color="#5880FF" inactive-color="#9B9B9B" :list="list" height="100" @change="changelist"></u-tabbar>
	</view>
</template>

<script>
import expressItem from './components/expressItem.vue';
import jc_yes from '@/static/image/jc_yes.png';
import jc_no from '@/static/image/jc_no.png';
import ls_yes from '@/static/image/ls_yes.png';
import ls_no from '@/static/image/ls_no.png';
export default {
	components: {
		expressItem
	},
	data() {
		return {
			// 判断是否还有数据
			dataOver: false,
			// 下方没内容提示
			loadText: {
				nomore: '实在没有了'
			},
			// 参数
			params: {
				pageIndex: 0,
				type: 1,
				param: ''
			},
			// 数据源
			datalist: [],
			// 下啦刷新标示
			freshing: false,
			triggered: false,
			// tabber列表
			list: [
				{
					text: '已寄出',
					iconPath: jc_no,
					selectedIconPath: jc_yes
				},
				{
					text: '已揽收',
					iconPath: ls_no,
					selectedIconPath: ls_yes
				}
			],
			current: 0
		};
	},
	onReady() {
		this.getData();
	},
	onLoad() {},
	methods: {
		changelist(index) {
			this.params.pageIndex = 0;
			this.params.type = index + 1;
			console.log(index);
		},
		// 获取数据
		getData(flag) {
			this.$store.dispatch('getMailLogPage', this.params).then(res => {
				console.log(res);
				let list = res.data.content;
				if (res.errorCode == 0) {
					if (flag) {
						this.datalist = list;
					} else {
						this.datalist.push(...list);
					}
					// 一页数据少于10 说明加载完了
					if (list.length < 10) {
						this.dataOver = true;
					}
					// 加载完毕后重置下啦刷新
					this.triggered = false;
					this.freshing = false;
				}
			});
		},
		// 下啦刷新
		refresherrefresh() {
			if (this.freshing) return;
			this.freshing = true;
			if (!this.triggered) {
				this.triggered = true;
			}
			this.dataOver = false;
			this.params.pageIndex = 0;
			this.getData('reset');
			console.log(1);
		},
		// 点击搜索按钮
		search() {
			if (this.freshing) return;
			this.freshing = true;
			this.dataOver = false;
			this.params.pageIndex = 0;
			this.getData('reset');
		},
		// 下啦刷新复位
		onRestore() {
			this.triggered = 'restore'; // 需要重置
			console.log('onRestore');
		},
		// 上啦加载
		scrolltolower() {
			// 数据加载完毕就不再加载了
			if (this.dataOver) {
				return;
			}
			++this.params.pageIndex;
			this.getData();
			console.log(1);
		},
		// 扫码
		scanCode(flag) {
			// 只允许通过相机扫码
			uni.scanCode({
				onlyFromCamera: true,
				success: res => {
					this.params.param = res.result;
					this.getData('reset');
				}
			});
		},

	},
	watch: {
		'params.type'() {
			this.dataOver = false;
			this.getData('reset');
			console.log('变化了');
		}
	}
};
</script>

<style lang="scss" scoped>
page {
}
.search {
	position: fixed;
	width: 100%;
	top: 0;
	background: #fff;
	display: flex;
	padding: 0 30rpx;
	height: 7vh;
	line-height: 7vh;
	align-items: center;
	justify-content: space-between;
}
.search_input {
	background: #f1f1f1;
	flex: 1;
	height: 64rpx;
	line-height: 64rpx;
	border-radius: 10rpx;
	padding-right: 15rpx;
}
.search_scan {
	padding: 0 0 0 30rpx;
}
.list {
	position: fixed;
	padding: 20rpx 0;
	width: 100vw;
	top: 7vh;
	bottom: 100rpx;
	padding-bottom: env(safe-area-inset-bottom);
}
</style>
